import { Layout, Menu, Breadcrumb, Icon } from 'antd';
import React from 'react'
import {adminRouter} from '../../routers';
import {withRouter} from 'react-router-dom'
const { Header, Content, Footer, Sider } = Layout;
const { SubMenu } = Menu;

@withRouter
class Frame extends React.Component {
  constructor(){
    super()
    this.state = {
      menus:adminRouter,
      collapsed: false,
      breadcrumb:[]
    }
  }
  /**
   * 侧边栏导航开关
   */
  onCollapse = collapsed => {
    console.log('collapsed :', collapsed);
    this.setState({ collapsed });
  };
  componentDidMount() {
  }
  routerName=(menus,pathname,data)=>{
    for (let index = 0; index < menus.length; index++) {
      const element = menus[index];
      if (element.pathname===pathname) {
        data.push(element)
        return data
      } 
      if (element.children) {
        this.routerName(element.children,pathname,data)
      }
     
    }
    return data;
    }
  handleMenuItem = (data)=>{
    this.props.history.push(data.key)
  
    var dataName =[]
    
    dataName= this.routerName(this.state.menus,data.key,dataName)
    var name=dataName[0].routerName;
    // if (name.length>=2){
    //   name.pop()
    // }
    this.setState({
      breadcrumb:name
    })
  }
  handleSubMenu = (data)=>{
    let name = []
    name.push(data.domEvent.target.innerText)
    this.setState({
      breadcrumb:name
    })
  }
  render() {
    return (
      <Layout style={{ minHeight: '100vh' }}>
        <Sider collapsible
         collapsed={this.state.collapsed} onCollapse={this.onCollapse}>
          <div className="logo" />
          <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline"
             onClick={this.handleMenuItem}
          >
          
            {
              this.state.menus.map(res=>{
                if (res.children) {
                  return (
                    <SubMenu
                      key={res.pathname}
                      onTitleClick={this.handleSubMenu}
                      title={
                        <span> <Icon type={res.icon} theme="filled"/>  <span>{res.title}</span> </span>
                      }
                      >
                      {
                        res.children.map(data=>{
                          return (
                              <Menu.Item key={data.pathname}>  <Icon type={data.icon} theme="filled"/>{data.title}</Menu.Item>
                          )
                        })
                      }
                    </SubMenu>
                      )
                }else{
                  return (
                    <Menu.Item key={res.pathname}>  <Icon type={res.icon} theme="filled"/>{res.title}</Menu.Item>
                )
                }
              })
            }
          </Menu>
        </Sider>
        <Layout>
          <Header style={{ background: '#fff', padding: 0 }} />
          <Content style={{ margin: '0 16px' }}>
            <Breadcrumb style={{ margin: '16px 0' }}>
              {
                this.state.breadcrumb.map(res=>{
                  return (
                    <Breadcrumb.Item key={res}>{res}</Breadcrumb.Item>
                  )
                })
              }
            </Breadcrumb>
            <div style={{ padding: 24, background: '#fff', minHeight: 360 }}>
                {this.props.children}
            </div>
          </Content>
          <Footer style={{ textAlign: 'center' }}>BLUE SKY蓝天 BLOGS</Footer>
        </Layout>
      </Layout>
    );
  }
}
export default Frame